<template>
    <div>
        <!-- 搜索框 -->
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" v-if="show">
            <el-form-item label="货品编码" prop="number">
                <el-input v-model="formInline.number" placeholder="请输入客户编码"></el-input>
            </el-form-item>
            <el-form-item label="货品名称" prop="name">
                <el-input v-model="formInline.name" placeholder="请输入货品名称"></el-input>
            </el-form-item>
            <el-form-item label="所属客户" prop="belongName">
                <el-input placeholder="请输入归属仓储客户" v-model="formInline.belongName" :disabled="true">
                    <el-button slot="append" @click="getData">选择</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="所属仓库" prop="wId">
                <el-select v-model="formInline.wId" placeholder="请选择仓库">
                    <el-option v-for="item in options" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit(formInline)">搜索</el-button>
                <el-button icon="el-icon-refresh-left" @click="Reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 新增 -->
        <div class="Newexportsearchrefresh">
            <div class="Addexport">
                <el-button type="primary" plain icon="el-icon-plus" @click="addLists()">新增</el-button>
                <el-button type="info" icon="el-icon-upload2">导出</el-button>
                <el-button type="warning" plain icon="el-icon-download" class="yello-button" @click="exports()">导出</el-button>
            </div>
             <div class="Searchrefresh">
                    <el-tooltip placement="top">
                        <div slot="content">{{ disabled ? '显示搜索' : '隐藏搜索' }}</div>
                        <el-button icon="el-icon-search" circle @click="Showorhide()"> </el-button>
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button icon="el-icon-refresh-left" circle @click="Reset()"></el-button>
                    </el-tooltip>
                </div>
        </div>
        <!-- 页面渲染 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号"  align="center"> </el-table-column>
            <el-table-column prop="number" label="货品编码" width="150" align="center"> </el-table-column>
            <el-table-column prop="name" label="货品名称" width="120" align="center"> </el-table-column>
            <el-table-column prop="sku" label="sku" width="120" align="center"> </el-table-column>
            <el-table-column prop="ename" label="英文名称" width="120" align="center"> </el-table-column>
            <el-table-column prop="belongName" label="所属客户" width="100" align="center"> </el-table-column>
            <el-table-column prop="stock" label="库存数量" width="120" align="center"> </el-table-column>
            <el-table-column prop="category" label="货品类别" width="120" align="center"> </el-table-column>
            <el-table-column prop="code" label="条形码" width="120" align="center"> </el-table-column>
            <el-table-column prop="brand" label="品牌" width="120" align="center"> </el-table-column>
            <el-table-column prop="spec" label="商品规格" width="120" align="center"> </el-table-column>
            <el-table-column prop="validity" label="保质期" width="120" align="center"> </el-table-column>
            <el-table-column prop="pic1" label="图片1" align="center">
                <template v-slot="scope">
                    <img :src="scope.row.pic1" alt="暂无图片" width="40" height="20" />
                </template>
            </el-table-column>
            <el-table-column prop="pic2" label="图片2" align="center">
                <template v-slot="scope">
                    <img :src="scope.row.pic2" alt="暂无图片" width="40" height="20" />
                </template>
            </el-table-column>
            <el-table-column prop="liquid" label="是否为液体" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.liquid == 0 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="powder" label="是否为粉末" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.powder == 0 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="overweight" label="是否超重" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.overweight == 0 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注1" width="120" align="center"> </el-table-column>
            <el-table-column prop="remark2" label="备注2" width="120" align="center"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.pId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页面渲染分页 -->
        <div class="block">
            <el-pagination
                style="float: right"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginations.pageNum"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="paginations.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paginations.total"
            >
            </el-pagination>
        </div>
        <!-- 所属客户弹窗 -->
        <div class="bus">
        <el-dialog title="所属客户" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" style="width: 1080px">
                <el-table-column property="name" label="名称" width="150"></el-table-column>
                <el-table-column property="address" label="地址" width="200"></el-table-column>
                <el-table-column property="contacts" label="联系人"></el-table-column>
                <el-table-column property="callNumber" label="电话"></el-table-column>
                <el-table-column property="fax" label="传真"></el-table-column>
                <el-table-column property="phone" label="手机"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row.name, scope.row.cId)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 所属客户弹窗分页 -->
            <div class="block">
                <el-pagination
                    style="float: right"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagi.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagi.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagi.total"
                >
                </el-pagination>
            </div>
        </el-dialog>
        </div>
        <!-- 新增弹窗 -->
        <div class="box">
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="商品编码" :label-width="formLabelWidth" prop="number">
                        <el-input v-model="form.number" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称" :label-width="formLabelWidth" prop="ename">
                        <el-input v-model="form.ename" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="计量单位" :label-width="formLabelWidth" prop="unit">
                        <el-input v-model="form.unit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品规格" :label-width="formLabelWidth" prop="spec">
                        <el-input v-model="form.spec" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="库存数量" :label-width="formLabelWidth" prop="stock">
                        <el-input v-model="form.stock" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品种类" :label-width="formLabelWidth" prop="kind">
                        <el-input v-model="form.kind" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属客户" prop="belongName">
                        <el-input placeholder="请输入归属仓储客户" v-model="formInline.belongName" :disabled="true">
                            <el-button slot="append" @click="getData">选择</el-button>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="商品类别" :label-width="formLabelWidth" prop="category">
                        <el-input v-model="form.category" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品大类" :label-width="formLabelWidth" prop="broad">
                        <el-input v-model="form.broad" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品小类" :label-width="formLabelWidth" prop="sub">
                        <el-input v-model="form.sub" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属仓库" :label-width="formLabelWidth" prop="wId">
                        <el-select v-model="formInline.wId" placeholder="请选择仓库">
                            <el-option v-for="item in options" :key="item.wId" :label="item.name" :value="item.wId"> </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="所属货架" :label-width="formLabelWidth" prop="label">
                    <el-select v-model="value" multiple placeholder="请选择">
                        <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item> -->
                    <el-form-item label="安全库存" :label-width="formLabelWidth" prop="warnStock">
                        <el-input v-model="form.warnStock" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="有效期（天）" :label-width="formLabelWidth" prop="validity">
                        <el-input v-model="form.validity" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述全" :label-width="formLabelWidth" prop="description">
                        <el-input v-model="form.description" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格单价" :label-width="formLabelWidth" prop="price">
                        <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新类别" :label-width="formLabelWidth" prop="newCategory">
                        <el-input v-model="form.newCategory" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="条形码" :label-width="formLabelWidth" prop="code">
                        <el-input v-model="form.code" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="打包规格" :label-width="formLabelWidth" prop="packs">
                        <el-input v-model="form.packs" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注1" :label-width="formLabelWidth" prop="remark">
                        <el-input v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注2" :label-width="formLabelWidth" prop="remark2">
                        <el-input v-model="form.remark2" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="库存金额" :label-width="formLabelWidth" prop="stock">
                        <el-input v-model="form.stock" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图片1" prop="pic1">
                        <el-upload
                            ref="upload"
                            :headers="headers"
                            action="http://47.100.8.204:8092/common/upload"
                            :on-preview="handlePreviewt"
                            :on-success="handlePreviewt"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false"
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="图片2" prop="pic2">
                        <el-upload
                            ref="uploads"
                            :headers="headers"
                            action="http://47.100.8.204:8092/common/upload"
                            :on-preview="handlePreview"
                            :on-success="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileListt"
                            :auto-upload="false"
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px" size="small" type="success" @click="submitUploads">上传到服务器</el-button>
                               
                        </el-upload>
                    </el-form-item>
                    <!-- 结束 -->
                    <el-form-item label="sku" :label-width="formLabelWidth" prop="sku">
                        <el-input v-model="form.sku" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌" :label-width="formLabelWidth" prop="brand">
                        <el-input v-model="form.brand" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 传值 -->
                    <el-form-item label="出库选项" :label-width="formLabelWidth" prop="options">
                        <el-select v-model="form.options" placeholder="请选择出库选项">
                            <el-option label="出库优先" value="0"></el-option>
                            <el-option label="有效期" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="有效期类型" :label-width="formLabelWidth" prop="valid">
                        <el-select v-model="form.valid" placeholder="请选择出库选项">
                            <el-option label="有效期产品" value="0"></el-option>
                            <el-option label="无效期产品" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="来源分类" :label-width="formLabelWidth" prop="line">
                        <el-select v-model="form.line" placeholder="请选择出库选项">
                            <el-option label="线上" value="0"></el-option>
                            <el-option label="线下" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 结束 -->
                    <el-form-item label="产品包装规格" :label-width="formLabelWidth" prop="pack">
                        <el-input v-model="form.pack" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="包装单位" :label-width="formLabelWidth" prop="packUnit">
                        <el-input v-model="form.packUnit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="易碎标志" :label-width="formLabelWidth" prop="fragile">
                        <el-input v-model="form.fragile" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- 传值 -->
                    <el-form-item label="是否为液体" prop="liquid">
                        <el-switch v-model="form.liquid" active-value="1" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </el-form-item>
                    <el-form-item label="是否为粉末" prop="powder">
                        <el-switch v-model="form.powder" active-value="1" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </el-form-item>
                    <el-form-item label="是否为超重" prop="overweight">
                        <el-switch v-model="form.overweight" active-value="1" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                    </el-form-item>
                    <!-- 结束 -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addto(form)">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { Warehousedata, Informationmaintenance, customer, Maintenancesearch, Goodsinformation, xi, dell } from '@/api/user';
export default {
    data() {
        return {
            fileList: [],
            fileListt: [],
            // 新增弹窗输入框大小
            formLabelWidth: '120px',
            // 新增弹窗
            dialogFormVisible: false,
            // 新增弹窗表单
            form: {},
            // 所属客户
            gridData: [],
            dialogTableVisible: false,
            // 所属客户分页
            pagi: {
                pageNum: 1,
                pageSize: 10,
                total: undefined
            },
            // 分页
            paginations: {
                // 当前页数
                pageNum: 1,
                // 显示几条
                pageSize: 10,
                total: undefined
            },
            // 数据
            tableData: [],
            // 所属仓库
            options: [],
            // 搜索
            formInline: {
                number: undefined,
                name: undefined,
                belongName: undefined,
                cId: undefined
            },
            option: [
                {
                    name: 'sui'
                }
            ],
            title: undefined,
            disabled: false,
            show: true,
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            // console.log(file,111);
            this.form.pic2 = file.url;
        },
        submitUploads() {
            this.$refs.uploads.submit();
        },
        handlePreviewt(file) {
            console.log(file);
            this.form.pic1 = file.url;
            console.log(this.form.pic2);
        },
        // 新增弹窗
        addLists() {
            this.dialogFormVisible = true;
            this.title = '添加货品';
        },
        // 新增和修改
        addto(val) {
            if (this.form.pId) {
                xi(this.form).then((ref) => {
                    // console.log(ref);
                    this.$message({
          message: '修改成功',
          type: 'success'
           });
                    this.Maintenanceinformation();
                    this.dialogFormVisible = false;
                });
            } else {
                Goodsinformation(val).then((ref) => {
                    // console.log(ref);
                    this.Maintenanceinformation();
                    this.dialogFormVisible = false;
                                        this.$message({
          message: '新增成功',
          type: 'success'
           });
                });
            }
        },
        // 重置
        Reset() {
            this.$refs.formInline.resetFields();
            this.Maintenanceinformation();
        },
        // 所属客户选择框
        handleEdit(name, cId) {
            this.dialogTableVisible = false;
            this.formInline.belongName = name;
            this.formInline.cId = cId;
        },
        // 所属客户
        getData() {
            this.dialogTableVisible = true;
            customer(this.pagi).then((ref) => {
                (this.gridData = ref.rows), (this.pagi.total = ref.total);
            });
        },
        // 搜索
        onSubmit(val) {
            // console.log(val);
            Maintenancesearch(this.formInline, this.paginations).then((ref) => {
                this.tableData = ref.rows;
            });
        },
        // 维护信息
        Maintenanceinformation() {
            Informationmaintenance(this.paginations).then((ref) => {
                this.tableData = ref.rows;
                this.paginations.total = ref.total;
            });
        },
        // 所属仓库
        Warehousedata() {
            Warehousedata().then((ref) => {
                // console.log(ref);
                this.options = ref.rows;
            });
        },
        // 分页（多少个）
        handleSizeChange(val) {
            this.paginations.pageSize = Number(val);
            this.getData();
        },
        // 分页（页数）
        handleCurrentChange(val) {
            this.paginations.pageNum = Number(val);
            this.getData();
        },
        // 修改
        handleClick(val) {
            this.form = val;
            this.dialogFormVisible = true;
            this.title = '修改货品';
        },
        // 删除
        del(val) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    dell(val).then((ref) => {
                        // console.log(ref);
                        this.Maintenanceinformation();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
                // 显示隐藏
        Showorhide() {
            (this.show = !this.show), (this.disabled = !this.disabled);
        },
    },
    mounted() {
        this.Warehousedata();
        this.Maintenanceinformation();
    },
    computed: {
        headers() {
            return {
                Authorization: localStorage.getItem('token')
            };
        }
    }
};
</script>

<style lang="less" scoped>
.Addexport /deep/ .el-button {
    widows: 70px !important;
}
/deep/ .yello-button {
    color: #ffba00;
    background: #fff8e6;
    border-color: #ffe399;
}
.Newexportsearchrefresh {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
/deep/.el-dialog {
    width: 500px !important;
}
/deep/.el-upload--text {
    width: 150px !important;
    overflow: unset !important;
    height: 50px !important;
    border: unset;
}
.block {
    height: 40px;
    margin-top: 20px;
}
.box/deep/.el-form-item__label {
    width: 120px;
}
.box/deep/.el-input-group {
    width: 73.5%;
}
.box/deep/.el-select {
    width: 100% !important;
}
.bus /deep/.el-dialog{
    width: 70% !important;
}
</style>